<!--
 * @Descripttion: 
 * @Version: 
 * @Author: gaohj
 * @Date: 2022-11-02 16:06:28
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-11-02 17:19:34
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=div, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test6">123</div>

    <div class="html5">12</div>
    <div class="html5">34</div>

    <ul>
        <li>1</li>
        <li>2</li>
        <li name="three">3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li name="three">7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>

    </ul>
    <script>

        // 根据id定位到元素
        // document.getElementById('id名字')
        // 如果有id名 那么就返回这个元素
        // 没有的话返回null 

//    console.log(document.getElementById('test6'))
    // 如果能找到 返回 <div id="test6">123</div>
    // 找不到 返回 null  

    // var test = document.getElementById('test6');
    // test.onclick = function(){
    //     alert(666);
    // }


    // 根据class类名获取  
    // 多个标签可以用相同的类名 
    // 所以这个关键词是个复数  getElementsByClassName

    // var datas = document.getElementsByClassName('html5');
    // console.log(datas); // 数组需要遍历

    // for(var index in datas){
    //     datas[index].onclick = function(){
    //         alert(666);
    //     }
    // }


    // 根据标签名进行获取 
    // 一个html文件有多个同名的标签 
    //  所以关键词也是复数 

    var datas = document.getElementsByTagName('div');
    
    for(var i=0;i<datas.length; i++){
        //    datas[i].dataset.index =  i; 
            datas[i].onclick = function(){
                var res = this.dataset.index;
                alert(res);
            }
        }


    // 根据选择器定位元素 

    // var datas = document.querySelector('ul > li:nth-child(3)');
    // console.log(datas) //这个只能选择一个

    // var datas = document.querySelectorAll('ul > li'); // 返回的是一个数组
    // // console.log(datas) //这个只能选择一个  
    // for(var index=0;index<datas.length; index++){
    //         datas[index].onclick = function(){
    //             alert(index);
    //         }
    //     }
    // 整个for循环结束了  index 才给到 function
    // var datas = document.getElementsByName('three');
    //     for(var index=0;index<datas.length; index++){
    //         datas[index].onclick = function(){
    //             alert(index);
    //         }
    //     }


    // head  html  body
    var head = document.head;
    var html = document.documentElement;
    var body = document.body;
    console.log(head,html,body)

    function test(){
        console.log(head);
    }
    </script>
</body>
</html>